<template>
  <h3>1.模板语法 通过双层花括号</h3><br>
  {{msg}} <br>
  {{code}} <br>
  {{number+1}} <br>
  {{ok?'Yes':'No'}} <br>
  {{msg.split("").reverse().join("")}} <br>
  {{userInfo.name}} <br>
  {{rawHtml}} <br>
  <p v-html="rawHtml"></p> <br>

  <h3>2.属性绑定 通过v-bind:</h3> <br>
  <div v-bind:id="dynamicId" v-bind:class="dynamicClass" v-bind:title="dynamicTitle">测试绑定v-bind:</div> <br>
  <div :id="dynamicId" :class="dynamicClass" :title="dynamicTitle">测试绑定:id</div> <br>
  <button :disabled="isButtonDisabled">按钮</button> <br>
  <div v-bind="objectOfAttrs">测试属性对象</div> <br>

  <h3>3.条件渲染 v-if/v-show</h3> <br>
  <div v-if="flag">你能看到我吗</div>
  <div v-show="flag">你能看到我吗</div>
  <!-- v-if和v-show的区别  -->

  <h3>4.列表渲染列表和对象 v-for</h3> <br>
  <p v-for="item in names">{{item}}</p> <br>
  <p v-for="item in result">[{{item.id}} , {{item.name}} , {{item.age}}]</p> <br>
  <p v-for="(item,index) in names">{{item}} 下标：{{index}}</p> <br>
  <p v-for="(item,index) of names">{{item}} 下标：{{index}}</p> <br>
  <p v-for="item in userInfo">{{item}}</p> <br>
  <p v-for="(value,key) in userInfo">{{key}}</p> <br>


</template>

<script>
  export default {
    data(){
      return{
        msg:"神奇的语法",
        code:"000000",
        number:10,
        ok:true,
        rawHtml:"<a href='https://baidu.com'>百度首页</a>",

        dynamicId:"appId",
        dynamicClass:"active",
        dynamicTitle:null,
        isButtonDisabled:true,
        objectOfAttrs:{
          id:"objectId",
          class:"class"
        },

        flag:true,

        names:["李星帅","熊玲玲","李佳煜"],
        result:[
            {"id":"1","name":"李星帅","age":29},
            {"id":"2","name":"熊玲玲","age":29},
            {"id":"3","name":"李佳煜","age":1}
        ],
        userInfo:{
          "id":"4",
          "name":"李扣扣",
          "age":29
        }
      }
    }
  }
</script>




